<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强密码生成器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>强密码生成器</h1>
        
        <div class="main-container">
            <!-- 密码显示区域 -->
            <div class="password-display">
                <input type="text" id="password-field" readonly>
                <button id="copy-btn">复制</button>
            </div>
            
            <!-- 密码长度设置 -->
            <div class="setting-group">
                <label for="password-length">密码长度: <span id="length-value">12</span></label>
                <div class="slider-container">
                    <input type="range" id="password-length" min="6" max="30" value="12" class="slider">
                </div>
            </div>
            
            <!-- 字符选项 -->
            <div class="setting-group">
                <h3>包含字符</h3>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="uppercase" checked>
                        <label for="uppercase">大写字母 (A-Z)</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="lowercase" checked>
                        <label for="lowercase">小写字母 (a-z)</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="numbers" checked>
                        <label for="numbers">数字 (0-9)</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="symbols" checked>
                        <label for="symbols">特殊符号 (!@#$%等)</label>
                    </div>
                </div>
            </div>
            
            <!-- 额外选项 -->
            <div class="setting-group">
                <h3>额外选项</h3>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="exclude-similar">
                        <label for="exclude-similar">排除相似字符 (i, l, 1, L, o, 0, O)</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="exclude-duplicate">
                        <label for="exclude-duplicate">排除重复字符</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="exclude-space" checked>
                        <label for="exclude-space">排除空格</label>
                    </div>
                </div>
            </div>
            
            <!-- 密码强度显示 -->
            <div class="password-strength">
                <span>密码强度:</span>
                <span id="strength-value"></span>
            </div>
            
            <!-- 生成密码按钮 -->
            <button id="generate-btn" class="generate-btn">生成密码</button>
        </div>
        
        <footer>
            <p>© 2023 强密码生成器 | <a href="https://github.com/yourusername/password-generator" target="_blank">GitHub</a></p>
        </footer>
    </div>
    
    <script src="script.js"></script>
</body>
</html> 